<script setup>
// 导入所需的组件和工具
import { ref, onMounted } from 'vue'  // 导入Vue的响应式API和生命周期钩子
import request from '@/utils/request'  // 导入配置好的axios请求实例
import { getInterviewRecordList } from '@/api/interviewRecordApi'  // 导入面试记录API

// 定义统计数据对象，使用ref使其具有响应式特性
const statistics = ref({
  totalCandidates: 0,    // 候选人总数
  monthlyInterviews: 0,  // 本月面试数量
  completedInterviews: 0, // 已完成的面试数
  passRate: 0            // 通过率
})

// 定义面试记录列表数据
const interviewRecords = ref([])
const loading = ref(false)
const tableLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

// 获取统计数据的方法
const fetchStatistics = async () => {
  loading.value = true  // 开始加载，显示加载动画
  try {
    const response = await request.get(`/statistics/interview/0`);  // 修改URL格式
    if (response.code === 200) {
      statistics.value = response.data;
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
  } finally {
    loading.value = false  // 结束加载，隐藏加载动画
  }
}

// 获取面试记录列表
const fetchInterviewRecords = async () => {
  tableLoading.value = true
  try {
    const response = await getInterviewRecordList({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })
    if (response.code === 200) {
      interviewRecords.value = response.data.list || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取面试记录失败:', error)
  } finally {
    tableLoading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchInterviewRecords()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchInterviewRecords()
}

// 获取面试结果类型
const getResultType = (result) => {
  const typeMap = {
    0: 'danger',    // 未通过
    1: 'warning',   // 待定
    2: 'success'    // 通过
  }
  return typeMap[Number(result)] || 'info'
}

// 获取面试结果文本
const getResultText = (result) => {
  const textMap = {
    0: '未通过',
    1: '待定',
    2: '通过'
  }
  return textMap[Number(result)] || '未知'
}

// 组件挂载时获取数据
onMounted(() => {
  fetchStatistics()
  fetchInterviewRecords()
})
</script>

<template>
  <div class="home">
    <h1>数据概览</h1>

    <!-- 统计卡片容器，使用v-loading指令显示加载状态 -->
    <div class="statistics-container" v-loading="loading">
      <!-- 候选人总数卡片 -->
      <div class="stat-card">
        <h3>候选人总数</h3>
        <div class="number">{{ statistics.totalCandidates }}</div>
      </div>

      <!-- 面试总数卡片 -->
      <div class="stat-card">
        <h3>面试总数</h3>
        <div class="number">{{ statistics.monthlyInterviews }}</div>
      </div>

      <!-- 已完成的面试卡片 -->
      <div class="stat-card">
        <h3>已完成的面试</h3>
        <div class="number">{{ statistics.completedInterviews }}</div>
      </div>

      <!-- 通过率卡片 -->
      <div class="stat-card">
        <h3>通过率</h3>
        <div class="number">{{ statistics.passRate }}%</div>
      </div>
    </div>

    <!-- 面试记录列表 -->
    <div class="interview-records">
      <h2>最近面试记录</h2>
      <el-table
        :data="interviewRecords"
        v-loading="tableLoading"
        style="width: 100%"
        border
      >
        <el-table-column prop="candidateName" label="候选人" width="120" />
        <el-table-column prop="positionName" label="面试职位" width="150" />
        <el-table-column prop="interviewDate" label="面试日期" width="180">
          <template #default="scope">
            {{ new Date(scope.row.interviewDate).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="面试时长" width="100">
          <template #default="scope">
            {{ scope.row.duration }}分钟
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getResultType(scope.row.interviewResult)">
              {{ getResultText(scope.row.interviewResult) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="得分" width="100">
          <template #default="scope">
            {{ scope.row.score || 0 }}/100
          </template>
        </el-table-column>
        <el-table-column prop="comments" label="评语" />
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器样式 */
.home {
  padding: 20px;
}

/* 标题样式 */
.home h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 24px;
}

.home h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 24px 0 16px;
}

/* 统计卡片容器样式 */
.statistics-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  /* 响应式网格布局 */
  gap: 20px;  /* 卡片之间的间距 */
  margin-top: 20px;
}

/* 统计卡片样式 */
.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */
  transition: transform 0.3s;  /* 添加过渡动画 */
}

/* 卡片悬停效果 */
.stat-card:hover {
  transform: translateY(-5px);  /* 悬停时向上移动 */
}

/* 卡片标题样式 */
.stat-card h3 {
  color: #666;
  font-size: 16px;
  margin-bottom: 10px;
}

/* 数字样式 */
.stat-card .number {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;  /* 使用主题色 */
}

/* 面试记录列表样式 */
.interview-records {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

/* 分页器容器样式 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>